<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织价格内容 头部 -->
      <el-card class="tree-card">
        <!-- 放置结构内容 -->
        <treeTools :treeNode="company" :isShow="true" @addDepart="addDepart" />
        <!-- 放置一个el-tree -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <treeTools
            slot-scope="{ data }"
            :treeNode="data"
            @updataDepart="departmentsList"
            @addDepart="addDepart"
            @editDepart="editDepart"
          />
        </el-tree>
      </el-card>
      <addDepartDialog
        :addShowDialog.sync="addShowDialog"
        :treeNode="node"
        @addDepts="departmentsList"
        ref="getdepartInfo"
      />
    </div>
  </div>
</template>

<script>
import treeTools from "@/views/departments/components/TreeTools.vue";
import addDepartDialog from "@/views/departments/components/addDepartDialog.vue";
import { getDepartmentsList } from "@/api/departments";
import { tranTree } from "@/utils/index";
export default {
  name: "departments",
  components: {
    treeTools,
    addDepartDialog,
  },
  data() {
    return {
      company: { name: "123", manager: "123" },
      departs: [
        {
          name: "总裁办",
          manager: "曹操",
          children: [{ name: "董事会", manager: "曹丕" }],
        },
        { name: "行政部", manager: "孙权" },
        { name: "人事部", manager: "刘备" },
      ],
      defaultProps: {
        label: "name",
      },
      addShowDialog: false,
      node: null,
    };
  },
  created() {
    this.departmentsList();
  },
  methods: {
    //获取组织信息
    async departmentsList() {
      const results = await getDepartmentsList();
      // console.log(results);
      this.company = {
        name: results.companyName,
        manager: "负责人",
        id: "",
      };
      // 将组织架构信息转为树形
      this.departs = tranTree(results.depts, "");
    },
    addDepart(node) {
      this.addShowDialog = true;
      this.node = node;
    },
    editDepart(node) {
      this.node = node;
      this.$refs.getdepartInfo.getDepartment(node.id);
      this.addShowDialog = true;
    },
  },
};
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>